<template>
  <el-card class="evaluation-statistics">
    <div slot="header" class="clearfix">
      <span style="font-size: 18px; font-weight: 600">评价评分占比</span>
    </div>
    <div id="evaluation-statistics" style="height: 100%"></div>
  </el-card>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'evaluation-statistics',
  data() {
    return {
      shape: null,
      evaluationScore: [],
      nameList: [],
    }
  },
  mounted() {
    this.$http({
      url: this.$http.adornUrl('/mall/workbench/evaluation'),
      method: 'get',
    }).then(({ data }) => {
      data.evaluation.forEach((item) => {
        item.name += '分'
      })
      this.evaluationScore = data.evaluation
      this.evaluationScore.forEach((item) => {
        this.nameList.push(item.name)
      })
      console.log(this.evaluationScore)
      this.initEvaluationShape()
    })
  },
  methods: {
    initEvaluationShape() {
      let option = {
        legend: {
          top: 'bottom',
          data: this.nameList
        },
        tooltip: {
          trigger: 'item',
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: '评价占比',
            type: 'pie',
            radius: [50, 240],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: this.evaluationScore
          }
        ]
      }
      this.shape = echarts.init(document.getElementById('evaluation-statistics'))
      this.shape.setOption(option)
      window.addEventListener('resize', () => {
        this.shape.resize()
      })
    }
  }
}
</script>

<style lang="less" scoped>
.evaluation-statistics{
  /deep/ .el-card__body{
    height: calc(100% - 64px);
    width: 100%;
  }
}
</style>
